<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>Scrolling DIV demo on iPhone / iPod Touch</title>
<meta name="description" content="The following demo works only on iPhone and iPod Touch +2.x">

<script type="text/javascript" src="iscroll.js?v=3.0b2"></script>

<script type="text/javascript">
var myScroll;
window.addEventListener('orientationchange', setHeight);

function setHeight() {
	document.getElementById('wrapper').style.height = window.orientation == 90 || window.orientation == -90 ? '80px' : '200px';
}

function loaded() {
	setHeight();
	document.addEventListener('touchmove', function(e){ e.preventDefault(); });
	myScroll = new iScroll('scroller');
}
document.addEventListener('DOMContentLoaded', loaded);
</script>

<style type="text/css" media="all">
body {
	padding:0;
	margin:0;
	font-size:12px;
	-webkit-user-select:none;
    -webkit-text-size-adjust: none;
	-webkit-box-sizing: border-box;
}

div {
	text-align:center;
}

.bigger {
	font-size:1.2em;
}

#header {
	width:100%;
	background-color:#aaa;
	padding:10px 0;
}

#footer {
	width:100%;
	background-color:#acc;
	padding:10px 0;
}

#wrapper {
	position:relative;	/* needed */
	z-index:1;			/* needed and important */
	width:100%;
	height:200px;		/* needed */
	overflow:hidden;	/* suggested */
	background:#999;
}

#scroller {
/*	-webkit-touch-callout:none;*/
/*	-webkit-tap-highlight-color:rgba(0,0,0,0);*/
/*	position:absolute;	/* optional. Seems to work with absolute, relative and without it */
/*	top:0;				/* optional */
/*	-webkit-box-shadow:0 0 40px rgba(0,0,0,0.8);*/

	float:left;
	width:600px;
	padding:10px;
	background:#eee;
}

.col {
	width:280px;
	float:left;
	padding:5px;
}

#scroller strong {
	font-size:200%;
}

.scrollbar {
	position: absolute;
	z-index: 10;
	width: 1px;
	height: 1px;
	border-width: 3px;
	-webkit-border-image: url(images/scrollbar.png) 3;
}

.scrollbar.horizontal {
	bottom: 1px;
	left: 1px;
}

.scrollbar.vertical {
	top: 1px;
	right: 1px;
}

</style>
</head>
<body>
<div id="header"><a href="http://cubiq.org/scrolling-div-for-mobile-webkit-turns-3/16">&laquo; Back to related article</a> | <a href="http://cubiq.org/">Cubiq.org</a></div>

<div id="wrapper">
	<div id="scroller">
		<div class="col">
			<p><strong>Scroll Me! (shorter)</strong><p>
			<a href="http://cubiq.org/scrolling-div-for-mobile-webkit-turns-3/16">Read more about this on my blog</a>.<br />
			<p><strong>End of scrolling</strong><p>
		</div>
		<div class="col">
			<p><strong>Scroll Me! (shorter)</strong><p>
			<a href="http://cubiq.org/scrolling-div-for-mobile-webkit-turns-3/16">Read more about this on my blog</a>.<br />
			<p><strong>End of scrolling</strong><p>
		</div>
	</div>
</div>

<div id="footer">Footer</div>
</body>
</html>